<template>
    <el-breadcrumb class="vea-breadcrumb">
        <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{name:'menu'}">菜单管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ editText }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form class="vea-form" label-width="120" ref="menu" :model="menuForm" :rules="rules">
        <el-form-item label="名称" prop="name">
            <el-input v-model="menuForm.name" clearable/>
        </el-form-item>
        <el-form-item label="路由" prop="jingle">
            <el-input v-model="menuForm.jingle" clearable/>
        </el-form-item>
        <el-form-item label="路径" prop="href">
            <el-input v-model="menuForm.href" clearable/>
        </el-form-item>
        <el-form-item label="上级菜单">
            <el-cascader :props="{label:'name',value:'id',checkStrictly:true}" :options="parentMenu" v-model="menuForm.pid"></el-cascader>
        </el-form-item>
        <el-form-item label="菜单类型">
            <el-radio-group v-model="menuForm.btn_type" @change="menuForm.btn_power=menuTypes[menuForm.btn_type]">
                <el-radio-button v-for="(btnType,inx) in menuTypes" :key="inx" :label="inx">{{ btnType }}</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="操作类型">
            <el-radio-group v-model="menuForm.option">
                <el-radio-button v-for="(btnType,inx) in menuOption" :key="inx" :label="inx">{{ btnType }}</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="排序">
            <el-input-number v-model="menuForm.sort"/>
        </el-form-item>
        <el-form-item label="状态">
            <el-switch inline-prompt v-model="menuForm.status" :inactive-value="2" :active-value="1" inactive-text="无效" active-text="有效"/>
        </el-form-item>
        <el-form-item label="菜单显示">
            <el-switch inline-prompt v-model="menuForm.show_menu" :inactive-value="2" :active-value="1" inactive-text="隐藏" active-text="显示"/>
        </el-form-item>
        <el-form-item label="图标">
            <el-select v-model="menuForm.img">
                <el-option v-for="icon in glyphs" :key="icon.icon_id" :value="icon.font_class" :label="icon.name">
                    <template #default>
                        <div class="vea-select-option-icon">
                            <i :class="`${font_family} ${css_prefix_text}${icon.font_class}`"></i>
                            <span>{{ icon.name }}</span>
                        </div>
                    </template>
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :loading="load" @click="save(menu)">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {$ajax, apiUrl} from "@/utils/request";
import {menuOption, menuTypes} from "@/utils/constant";
import {glyphs, font_family, css_prefix_text} from "@/assets/veafonts/verjs_font.json"
import router from "@/router";

const menu = ref()
const menuForm = ref({
    id: null,
    name: null,
    pid: 0,
    jingle: null,
    href: null,
    option: "index",
    btn_power: null,
    sort: 1,
    btn_type: "",
    show_menu: 2,
    status: 1,
    img: null
})
const rules = ref({
    name: [
        {required: true, message: '请输入菜单名称'}
    ],
    jingle: [
        {required: true, message: '请输入菜单路由'},
        {
            validator: (rule, value, callback) => {
                if (!/^[a-zA-Z_]+$/.test(value)) {
                    callback(Error("路由规则只能是字母或_"))
                }
                callback()
            }
        }
    ],
    href: [
        {required: true, message: '请输入菜单路径'},
        {
            validator: (rule, value, callback) => {
                if (!/^[a-zA-Z_/]+$/.test(value)) {
                    callback(Error("路径规则只能是字母、_或/"))
                }
                callback()
            }
        }
    ]
})
const route = useRoute()
const editText = computed(() => {
    return (route.name === "menu_add" ? "新增" : "编辑") + "菜单"
})
const load = ref(false)
const parentMenu = ref([]);
onMounted(() => {
    $ajax.get(`${apiUrl}/menu/webTree`).then(({data: {result}}) => {
        parentMenu.value = result
    })
    const id = route.params.id
    if (id) {
        $ajax.get(`${apiUrl}/menu/one.html`, {params: {id}}).then(({data: {result}}) => {
            menuForm.value = result
        });
    }
})
const save = (refs) => {
    refs.validate(err => {
        load.value = err
        if (err) {
            if (typeof menuForm.value.pid === "object") {
                menuForm.value.pid = menuForm.value.pid[menuForm.value.pid.length - 1]
            }
            $ajax.post(`${apiUrl}/menu/save`, menuForm.value).then(() => {
                load.value = false
                router.replace({name: "menu"})
            }).catch(() => load.value = false)
        }
    })
}
</script>

<style scoped></style>
